<template>
<div class="Hall">
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height:100%;">
    <div class="accountInfo">
      <div class="tisMsg">
        您的账号未激活，无法接单
        <span class="btn">去激活</span>
      </div>
      <div class="info">
        <div class="amount">0.00 DC</div>
        <div class="amount-x">
          <span>可用余额：0.00 DC</span>
          <span>冻结余额：0.00 DC</span>
        </div>
        <div class="red">可用余额低于1000.00 DC时将无法接单</div>
      </div>
    </div>
    <div class="statistical">
      <div class="operation">
        <span class="buy_coins">一键买币</span>
        <span class="start_order" @click="startOrder">开始接单</span>
      </div>
      <div class="s-data">
        <div class="day">
          <span class="n">0</span>
          <span class="text">今日接单</span>
        </div>
        <div class="day">
          <span class="n">0</span>
          <span class="text">今日流水(万)</span>
        </div>
        <div class="day">
          <span class="n">0</span>
          <span class="text">今日盈利</span>
        </div>
      </div>
      <div class="announcement-list">
        <div class="hd bd-b">
          <span class="title">公告</span>
          <span class="text">全部公告</span>
        </div>
        <ul class="list">
          <li class="bd-b">
            <div class="info">
              <span class="name">关于支付宝订单额度调整通知</span>
              <span class="time">2019-12-17 15:07:11</span>
            </div>
            <span class="icon-right"></span>
          </li>
          <li class="bd-b">
            <div class="info">
              <span class="name">关于支付宝订单额度调整通知</span>
              <span class="time">2019-12-17 15:07:11</span>
            </div>
            <span class="icon-right"></span>
          </li>
        </ul>
      </div>
    </div>
   </van-pull-refresh>
</div>
</template>
<script>
export default {
  name: 'Hall',
  data() {
    return {
      isLoading: false
    };
  },
  props: {
    value: {
      type: Boolean
    },
    defaultName: {
      type: String
    }
  },
  computed: {
    isOrgList: {
      get() {
        return this.value;
      },
      set(val) {
        return this.$emit('input', val);
      }
    }
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    },
    startOrder() {
      this.isOrgList = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.Hall{
  .accountInfo{
    background-color: #fff;
    margin-top:20px;
    padding: 32px;
     .tisMsg{
       padding-left: 50px;
       padding-bottom: 20px;
       color: #333;
       font-size: 24px;
       background-image: url('../assets/images/icon-activation.png');
       background-position: left 14px;
       background-repeat: no-repeat;
       background-size: 33px 29px;
       .btn{
         display: inline-block;
         padding: 0 29px;
         line-height: 58px;
         color: #fff;
         background-color: #2C64EF;
         border-radius: 58px;
         font-size: 24px;
         margin-left:73px;
       }
    }
    .info{
      padding: 0 0 10px;
      .amount{
        font-size: 60px;
        color: #333;
      }
      .amount-x{
        font-size: 24px;
        color: #333;
        padding: 10px 0;
        span{
          margin-right: 62px;
        }
      }
      .red{
        color: #E9231A;
        font-size: 20px;
      }
    }
  }
  .statistical{
    margin-top:20px;
    // position: relative;
    height: calc(100% - 430px);
    background-color: #fff;
    box-sizing: border-box;
    .announcement-list{
      padding: 20px 28px 95px;
      background-color: #fff;
      .hd{
        display: flex;
        padding: 12px 0;
        justify-content: space-between;
        .title{
          color: #333;
          font-size: 32px;
        }
        .text{
          color: #2C64EF;
          font-size: 26px;
        }
      }
      .list{
        li{
          padding: 25px 20px 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .icon-right{
            display: inline-block;
            content: '';
            height: 20px;
            width: 10px;
            background-image: url('../assets/images/icon-arrow-right-grey.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
            vertical-align: middle;
          }
          .info{
            .name{
              display: block;
              font-size: 26px;
              color: #333;
            }
            .time{
              font-size: 20px;
              color: #333;
            }
          }
        }
      }
    }
    .s-data{
      padding: 20px 30px;
      background-color: #fff;
      border-top:20px solid #f4f4f4;
      display: flex;
      margin-left: -17px;
      .day{
        display: block;
        flex: 1;
        margin-left: 17px;
        padding: 17px 0;
        background-color: #2C64EF;
        color: #fff;
        .n{
          display: block;
          text-align: center;
          font-size:48px;
        }
        .text{
          text-align: center;
          display: block;
          font-size: 24px;
        }
      }
    }
    .operation{
      display: flex;
       padding: 20px 30px;
       margin-left: -17px;
       background-color: #fff;
      span{
        display: block;
        flex: 1;
        text-align: center;
        background-color: #2C64EF;
        color: #fff;
        padding: 27px 0;
        font-size: 30px;
        margin-left: 17px;
      }
      .buy_coins{
        &::before{
          content: '';
          width: 29px;
          height: 43px;
          display: inline-block;
          margin:-4px 10px 0;
          background-position: center center;
          background-size: 29px 43px;
          background-image: url('../assets/images/icon_buy_coins.png');
          background-repeat: no-repeat;
          vertical-align: middle;
        }
      }
      .start_order{
        &::before{
          content: '';
          width: 45px;
          height: 39px;
          display: inline-block;
          margin:-4px 14px 0;
          background-position: center center;
          background-size: 45px 39px;
          background-image: url('../assets/images/icon-start-order.png');
          background-repeat: no-repeat;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
